<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     div{
         width: 100px;
         height: 100px;
         background-color: red;
     }
     a{
         width: 100px;
         height: 100px;
         margin-left: 100px;
         margin-right: 100px;
     }
     img{
         display: block;
         margin:0 auto;
     }
    </style>
</head>
<body>
    <!-- html 标签的的分类
        1.块标签 2.内联标签 3.
    -->
    <!-- 块标签
    特点：1.独占一行
    -->
   <div>
    
   </div>
   <p>fuxiaohai</p>
   <h1>fuxiaohai</h1>
   <ul>
       <li>css</li>
       <li>html</li>
   </ul>
<!-- 内联标签（行内） 
1.并排显示
2.不能设置width、height
3.不能设置margin-top\margin-bottom
-->
   <a href="http://taobao.com">淘宝</a>
   <span>span</span>
   <i>fuxiaohai</i>
   <em>fuxiaohai</em>
   <strong>strong</strong>

<!--内联块 
1.并排显示
2.可以设置width、height
-->
<img src="images/about.jpg" alt="">
<input type="text">
<button>but</button>
</body>
</html>